<template>
  <view>
    <view class="middle">
      <view class="middle_key">
        <view class="middle_fl">装</view>
        <view class="middle_fr">
          <view class="minor_fl">
            <view class="minor_top">
              <text>请选择装货地</text>
            </view>
            <view class="minor_box">
              <image src="@/static/iocn45.png" v-if="show"></image>
              <pickerAddress class="choice" @change="change"
                ><text>{{ receiveZone }}</text></pickerAddress
              >
            </view>
          </view>
        </view>
      </view>
      <view class="middle_key middle_list">
        <view class="middle_fl">卸</view>
        <view class="middle_fr">
          <view class="minor_fl">
            <view class="minor_top">
              <text>请选择卸货地</text>
            </view>
            <view class="minor_box">
              <image src="@/static/iocn45.png" v-if="shows"></image>
              <pickerAddress class="choice" @change="change1"
                ><text>{{ receiveZone1 }}</text>
              </pickerAddress>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="success">
      <view class="success_key">
        <view class="tubiao">
          <image src="../../static/icon9.png" mode=""></image>
          <view class="success_fl">用车类型</view>
        </view>
        <view class="success_fr">
          <text
            class="divider"
            :class="lesscarload == 0 ? 'active' : ''"
            @click="checkmdex(0)"
            >不限</text
          >
          <text
            class="divider"
            :class="lesscarload == 1 ? 'active' : ''"
            @click="checkmdex(1)"
            >整车</text
          >
          <text
            class="divider"
            :class="lesscarload == 2 ? 'active' : ''"
            @click="checkmdex(2)"
            >零担</text
          >
        </view>
      </view>
    </view>
    <view class="success">
      <view class="success_key">
        <view class="tubiao">
          <image src="@/static/iocn18.png" mode=""></image>
          <view class="success_fl">已设置常用路线</view>
        </view>
        <view class="success_fe" v-for="(item, index) in list" :key="item.id">
          <image src="@/static/iocn46.png" mode=""></image>
          <text class="text1">{{ item.departure }}</text>
          <text>→</text>
          <text class="text2">{{ item.destination }}</text>
          <text class="del" @click="shanchushow = true">删除</text>
          <view>
            <u-modal
              :show="shanchushow"
              :showCancelButton="true"
              @confirm="confirms(item)"
              @cancel="cancel"
              title="确定删除"
              :content="content"
            ></u-modal>
          </view>
        </view>
      </view>
    </view>
    <view class="nextstep" @click="Confirm()">确认添加</view>
  </view>
</template>

<script>
import {
  GetCommRoutes,
  RouteSetting,
  RouteDelete,
} from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
import pickerAddress from "@/components/wangding-pickerAddress/wangding-pickerAddress.vue";
export default {
  components: {
    pickerAddress,
  },
  data() {
    return {
      navIndex: 0,
      lesscarload: 0,
      receiveZone: "点击添加", //所在地区
      receiveZone1: "点击添加", //所在地区
      show: true,
      shows: true,
      skipCount: 0,
      maxResultCount: 10,
      list: [],
      shanchushow: false,
    };
  },
  onLoad() {
    this.getConfirm();
  },
  methods: {
    checkIndex(e) {
      this.navIndex = e;
      if (e == 0) {
        this.needInvoiced = true;
      } else {
        this.needInvoiced = false;
      }
      console.log(this.needInvoiced);
    },
    checkmdex(e) {
      this.lesscarload = e;
    },
    change(data) {
      this.receiveZone = data.data.join("");
      this.show = false;
    },
    change1(data) {
      this.receiveZone1 = data.data.join("");
      this.shows = false;
    },
    async getConfirm() {
      var skipCount = this.skipCount;
      var maxResultCount = this.maxResultCount;
      var userId = getValue("id");
      try {
        const { data: res } = await GetCommRoutes({
          skipCount,
          maxResultCount,
          userId,
        });
        this.list = res.result.items;
      } catch (e) {}
    },
    async Confirm() {
      var departure = this.receiveZone;
      var destination = this.receiveZone1;
      var userId = getValue("id");
      if (this.receiveZone == "点击添加") {
        uni.showToast({
          title: "起始地不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (this.receiveZone1 == "点击添加") {
        uni.showToast({
          title: "目的地不能为空",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      try {
        const { data: res } = await RouteSetting({
          departure,
          destination,
          userId,
        });
        console.log(res);
        this.getConfirm();
      } catch (e) {}
    },

    // 确认
    async confirms(item) {
      this.shanchushow = false;
      var id = item.id;
      try {
        const { data: res } = await RouteDelete({
          id,
        });
        console.log(res);
        this.getConfirm();
      } catch (e) {}
    },
    // 取消
    cancel() {
      this.shanchushow = false;
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  padding: 0 15upx;
}

.middle {
  margin-top: 23upx;
  background-color: #fff;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5,
    1.75upx 1.75upx 7.01upx 0px #e5e5e5;
  border-radius: 20upx;

  .middle_key {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 20upx 30upx;

    .middle_fl {
      width: 56upx;
      height: 56upx;
      opacity: 1;
      border-radius: 10upx;
      background: #ffc300;
      font-size: 38upx;
      color: #fff;
      font-weight: bold;
      text-align: center;
      line-height: 56upx;
      margin-top: -38upx;
    }

    .middle_fr {
      display: flex;
      align-items: center;
      justify-content: start;
      margin-left: 20upx;
      font-size: 28upx;
      font-weight: 600;

      image {
        width: 24upx;
        height: 24upx;
      }
    }

    .minor_box {
      display: flex;
      align-items: center;

      image {
        margin: 20upx 6upx;
      }

      .choice {
        color: rgba(128, 128, 128, 1);
        font-size: 24upx;
        font-weight: 400;
      }
    }
  }

  .middle_list {
    border-top: 2upx solid #e5e5e5;

    .middle_fl {
      background-color: #ef4d3d;
    }
  }
}

.success {
  width: 100%;
  background-color: #fff;
  padding: 0 20upx;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5,
    1.75upx 1.75upx 7.01upx 0px #e5e5e5;
  margin-top: 20upx;
  border-radius: 20upx;

  .success_key {
    width: 100%;

    .tubiao {
      display: flex;
      align-items: center;
      margin: 10upx 5upx;
      padding-top: 10upx;

      image {
        margin-right: 10upx;
        width: 44upx;
        height: 44upx;
      }
    }

    .success_fl {
      font-size: 28upx;
      font-weight: bold;
    }

    .success_fr {
      display: flex;
      align-items: center;
      padding-bottom: 40upx;

      text {
        font-size: 24upx;
        color: #808080;
      }

      .divider {
        width: 87upx;
        height: 50upx;
        opacity: 1;
        border-radius: 10upx;
        background: #ffffff;
        border: 2upx solid #ef4d3d;
        font-size: 28upx;
        font-weight: bold;
        text-align: center;
        color: #000;
        line-height: 46upx;
        margin-left: 38upx;
        margin-top: 30upx;
      }

      .active {
        background-color: #ef4d3d;
        color: #fff;
      }
    }

    .success_fe {
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(229, 229, 229, 1);
      font-size: 24upx;
      padding: 5upx 0upx;
      image {
        width: 35upx;
        height: 35upx;
        margin: 10upx 10upx;
      }

      .text1 {
        width: 200upx;
        overflow: hidden; //超出隐藏
        white-space: nowrap; //不换行，同一行展示
        text-overflow: ellipsis; //设置超出部分以省略号展示
      }
      .text2 {
        width: 300upx;
        overflow: hidden; //超出隐藏
        white-space: nowrap; //不换行，同一行展示
        text-overflow: ellipsis; //设置超出部分以省略号展示
      }

      text {
        margin: 0 5upx;
      }

      .del {
        border: 1px solid red;
        text-align: center;
        width: 70upx;
        line-height: 40upx;
        color: #ffffff;
        background-color: #ef4d3d;
        position: absolute;
        margin-left: 610upx;
        border-radius: 10upx;
      }
    }
  }
}

.nextstep {
  width: 591upx;
  height: 71upx;
  opacity: 1;
  border-radius: 17upx;
  background: #ef4d3d;
  font-size: 31upx;
  bottom: 35upx;
  text-align: center;
  color: #fff;
  line-height: 71upx;
  font-weight: bold;
  position: fixed;
  left: 80upx;
}
</style>
